<template>
  <tree-select
    ref="treeSelect"
    @treeSelect="handleTreeSelect"
    :selectStyle="selectStyle"
    :options="selectData"
    :selectValue="selectValue"
    :disabled="disabled"
  />
</template>

<script>
import TreeSelect from '@/components/ETreeSelect'
import { queryUserByDeptId } from '@/api/assets'

export default {
  components: {
    TreeSelect
  },
  props: ['disabled', 'selectValue', 'selectStyle', 'deptId', 'deptIdManage'],
  // props: {
  //   disabled: {
  //     type: Boolean,
  //     default: false
  //   },
  //   selectValue: {
  //     type: String,
  //     default: ''
  //   },
  //   selectStyle: {
  //     type: Object,
  //     default() {
  //       return {}
  //     }
  //   },
  //   deptId: {
  //     type: Object || String,
  //     default: () => {
  //       return {}
  //     }
  //   }
  // },
  watch: {
    selectValue(n, o) {
      this.value = n
    },
    deptId(n, o) {
      if (n.id) {
        this.getData(n.id)
      } else {
        this.getData(n)
      }
    },
    deptIdManage(n, o) {
      if (n.id) {
        this.getData(n.id)
      } else {
        this.getData(n)
      }
    }
  },
  data() {
    return {
      selectData: [],
      value: this.selectValue
    }
  },
  created() {
    if (this.deptIdManage) {
      if (typeof this.deptIdManage === 'object') {
        this.getData(this.deptIdManage.id)
      } else {
        this.getData(this.deptIdManage)
      }
    }
    if (this.deptId) {
      if (typeof this.deptId === 'object') {
        this.getData(this.deptId.id)
      } else {
        this.getData(this.deptId)
      }
    }
  },
  methods: {
    handleData(arr) {
      arr.map(v => {
        v.id = v.userId
        v.label = v.name
        // if (v.children.length > 0) {
        //   this.handleData(v.children)
        // } else {
        //   delete v.children
        // }
      })
      return arr
    },
    getData(deptId) {
      queryUserByDeptId({ deptId }).then(res => {
        if (res.data.length > 0) {
          this.selectData = res.data
          this.selectData.map(v => {
            v.id = v.userId
            v.label = v.name
          })
        } else {
          this.selectData = res.data
        }
      })
    },
    reset() {
      this.$refs.treeSelect.reset()
    },
    handleTreeSelect(value) {
      console.log('value', value)
      this.$emit('select', value)
    }
  }
}
</script>
